<template>
  <div class="s-Datastyle">
    <div class="left-content">
      <div class="demo-collapse">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="数据使用方式" name="1">
            <el-radio-group v-model="parms.radioData" @change="DataChange">
              <el-radio :label="d.value" v-for="d in state.radioDataList" :key="d.value">
                <div class="numbox">
                  <p>
                    <span class="ell">{{ d.name }}</span>
                  </p>
                </div>
              </el-radio>
            </el-radio-group>
          </el-collapse-item>
          <el-collapse-item title="数据开放类型" name="2">
            <el-radio-group v-model="parms.radioChoose" @change="DataChange">
              <el-radio :label="d.value" v-for="d in state.radioChooseList" :key="d.value">
                <div class="numbox">
                  <p>
                    <span class="ell">{{ d.name }}</span>
                  </p>
                </div>
              </el-radio>
            </el-radio-group>
          </el-collapse-item>
          <el-collapse-item title="主题资源" name="3">
            <el-radio-group v-model="parms.radioThemeResource" @change="DataChange">
              <el-radio :label="d.id" v-for="d in state.themeResourceList" :key="d.id">
                <div class="numbox">
                  <p>
                    <span class="ell">{{ d.name }}</span>
                    <i>({{ d.num || 0 }})</i>
                  </p>
                </div>
              </el-radio>
            </el-radio-group>
          </el-collapse-item>
          <el-collapse-item title="县区资源" name="4">
            <el-radio-group v-model="parms.radioCounties" @change="DataChange">
              <el-radio :label="d.id" v-for="d in state.CountiesList" :key="d.id">
                <div class="numbox">
                  <p>
                    <span class="ell">{{ d.name }}</span>
                    <i>({{ d.num || 0 }})</i>
                  </p>
                </div>
              </el-radio>
            </el-radio-group>
          </el-collapse-item>
          <el-collapse-item title="部门资源" name="5">
            <el-radio-group v-model="parms.radioDepartments" @change="DataChange">
              <el-radio :label="d.id" v-for="d in state.DepartmentList" :key="d.id">
                <div class="numbox">
                  <p>
                    <span class="ell">{{ d.name }}</span>
                    <i>({{ d.num || 0 }})</i>
                  </p>
                </div>
              </el-radio>
            </el-radio-group>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="right-content">
      <div class="rightTitle">
        <p>
          共有
          <span>{{ totleNum }}</span>
          个资源
        </p>
      </div>
      <div>
        <DataRihghtList :data="state.dataList" />
        <el-pagination @current-change="handleCurrentChange" :page-size="parms.pageSize" :current-page="parms.pageNum" layout="prev, pager, next, jumper" :total="totleNum" background></el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup>
import DataRihghtList from "./DataRihghtList.vue";
import { ref, reactive, onMounted, inject } from "vue";
import { useRoute } from "vue-router";
const routeget = useRoute();
const http = inject("ajax");

const activeName = ref("1");
const parms = reactive({
  radioData: 0,
  radioChoose: 0,
  radioThemeResource: 0,
  radioCounties: 0,
  radioDepartments: 0,
  pageNum: 1,
  pageSize: 5,
});
let state = reactive({
  radioDataList: [
    { name: "全部", value: 0 },
    { name: "API", value: 1 },
    { name: "文件", value: 2 },
    { name: "数据集", value: 3 },
  ],
  radioChooseList: [
    { name: "全部", value: 0 },
    { name: "有条件开放", value: 1 },
    { name: "无条件开放", value: 2 },
  ],
  themeResourceList: [],
  CountiesList: [],
  DepartmentList: [],
  dataList: [],
});
const totleNum = ref(0);

onMounted(() => {
  getThemeResourceList();
  getCountiesList();
  getDepartmentList();
  getDate();
  let name = routeget.query.name;
  // console.log(name);
});

const getThemeResourceList = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/statistics/govList", {}, "GET")
    .then(res => {
      state.themeResourceList = res.data;
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getCountiesList = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/statistics/cityList", {}, "GET")
    .then(res => {
      state.CountiesList = res.data;
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getDepartmentList = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/statistics/depList", {}, "GET")
    .then(res => {
      state.DepartmentList = res.data;
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getDate = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/dataPool/dataPoolPager", parms, "post")
    .then(res => {
      state.dataList = res.data.rows;
      totleNum.value = res.data.total;
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const DataChange = d => {
  parms.pageNum = 1;
  su.scroll.scrollTop();
  getDate();
};
const handleCurrentChange = val => {
  su.scroll.scrollTop();
  parms.pageNum = val;
  getDate();
};
</script>
